<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <el-dialog
  :title="title"
  append-to-body
  :modelValue="visible"
  width="80%"
  :before-close="handleClose"
  >
    <div class="layout">
      <div class="left">23</div>
      <el-tabs class="right">
        <el-tab-pane label="审批人">审批人</el-tab-pane>
        <el-tab-pane label="执行人">执行人</el-tab-pane>
        <el-tab-pane label="抄送人">抄送人</el-tab-pane>
      </el-tabs>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean, // sync
      default: false
    },
    title: {
      type: String,
      default: '添加节点'
    }
  },
  methods: {
    handleClose() {
      this.$emit('onUpdateVisible', false)
    }
  }
}
</script>

<style scoped>
.layout {
  display: flex;
}
.left {
  border: 1px solid #eee;
  margin-right: 10px;
  width: 60%;
  padding: 10px;
  height: 70vh;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.right {
  flex: 1;
  width: auto;
  height: 70vh;
}
.el-dialog__body{
  padding: 20px!important;
}
.el-dialog__footer {
  padding: 0 20px 20px 20px!important;
}
</style>
